import { FC, useState } from "react";
import style from './index.module.scss'
import { infoType } from "@/store/MessageStore";
import classnames from 'classnames/bind'
import { ProgressCircle, Image, ImageViewer } from "antd-mobile";
const CBN = classnames.bind(style)
type ImageMessageType = infoType & {
    position: 'left' | 'right',
}

const ImageMessage: FC<ImageMessageType> = (props) => {
    const { value, type, position, isSuccess = false, loadingPercent = 0, } = props
    const [visible, setVisible] = useState(false)
    const TotalCls = {
        'ImageMessage': true,
        'left': position === 'left',
        'right': position === 'right',
    }
    return <>
        <div className={CBN(TotalCls)} onClick={() => {
            setVisible(true)
        }}>
            <Image lazy src={value} height={140} fit='cover' />
            {position === 'right' ? isSuccess ? null : <div className={CBN('loadingmask')}>
                <ProgressCircle percent={loadingPercent} style={{ '--track-width': '6px' }} />
            </div> : null}

        </div>
        <ImageViewer
            classNames={{
                mask: 'customize-mask',
                body: 'customize-body',
            }}
            image={value}
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
        />
    </>

}

export default ImageMessage